<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端首页</title>
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios.js-->
    <script src="/js/axios.min.js"></script>

    <!--vue提供的生成二维码的组件-->
    <script src="/js/vue-qriously.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #eee;
        }

        .top {
            width: 100%;
            background-color: #fff;
        }

        .top .inset {
            width: 1200px;
            height: 50px;
            margin: auto;
        }

        .top .inset img {
            height: 30px;
            margin: 10px;
            float: left;
            margin-right: 20px;
        }

        .top .inset ul {
            list-style: none;
        }

        .top .inset ul li {
            float: left;
            line-height: 50px;
        }

        .top .inset ul a {
            width: 70px;
            text-decoration: none;
            color: #888;
            display: block;
            text-align: center;
        }

        .top .inset .sousuo {
            width: 260px;
            float: left;
        }

        .top .inset .sousuo .inp {
            width: 250px;
            height: 30px;
            padding: 10px;
            margin-top: 10px;
            border-radius: 50px;
            background-color: #f6f6f6;
            border: 1px solid #eee;
        }

        .top .inset .sousuo .btn {
            width: 50px;
            height: 25px;
            border-radius: 50px;
            border: none;
            background-color: #055ad7;
            color: #fff;
            position: relative;
            cursor: pointer;
            top: -28px;
            left: 198px;
        }

        .top .inset .denglu {
            float: right;
            width: 280px;
            height: 50px;
            padding-right: 30px;
        }

        .top .inset .denglu .login {
            width: 160px;
            color: #055ad7;
            text-align: center;
            float: left;
        }

        .top .inset .denglu .login a {
            text-decoration: none;
            color: #055ad7;
            font-size: 18px;
            line-height: 50px;
        }

        .top .inset .denglu .kefu {
            width: 50px;
            float: right;
            text-align: center;
        }

        .top .inset .denglu .kefu img {
            position: relative;
            top: -8px;
            width: 25px;
            height: 25px;
        }

        .top .inset .denglu .kefu .ktext {
            font-size: 12px;
            position: relative;
            top: -16px;
        }

        .wei {
            height: 40px;
            width: 1200px;
            margin: auto;
            clear: both;
            line-height: 40px;
        }

        .wei a {
            text-decoration: none;
            font-size: 12px;
            color: #000;
        }

        .wei a:nth-child(2) {
            color: #3f89ec;
        }

        .banner {
            background-color: #fff;
            background-image: url(https://fe1.hdfimg.com/nmenzhen/pcguahao/images/icon-banner.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50%;
            width: 1200px;
            height: 210px;
            margin: auto;
        }

        .banner .b-t {
            width: 598px;
            margin: auto;
            padding-top: 30px;
            line-height: 65px;
            height: 65px;
            font-size: 46px;
            font-weight: 700;
        }

        .banner .b-t .b-one {
            float: left;
            color: #46a0f0;
        }

        .banner .b-t .b-two {
            float: left;
            color: #f65b7d;
        }

        .banner .b-b {
            margin-top: 50px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 26px;
            color: #fff;
            clear: both;
        }

        .center {
            margin: auto;
            width: 1200px;
            padding-top: 50px;
            background-color: #fff;
        }

        .center .inp input {
            width: 600px;
            height: 45px;
            outline: 0;
            border-radius: 5px;
            padding-left: 10px;
            font-size: 18px;
            display: block;
            margin: auto;
            border: 1px solid #055ad7 !important;
        }

        .center .inp button {
            width: 100px;
            height: 45px;
            font-size: 20px;
            border: none;
            color: #fff;
            border-radius: 0 5px 5px 0;
            margin: auto;
            display: block;
            position: relative;
            top: -45px;
            left: 250px;
            background-color: #055ad7 !important;
        }

        .d-d a {
            text-decoration: none;
            color: #888;
        }

        #city-container a {
            text-decoration: none;
            color: #888;
        }

        .city-list {
            margin-left: 50px;
            display: none;
        }

        .doc {
            display: inline-block;
            color: #888;
            margin-left: 10px;
        }

        .d-ks {
            display: inline-block;
            color: #888;
            margin-left: 10px;
        }

        .d-jib {
            display: inline-block;
            color: #888;
            margin-left: 10px;
        }

        .city1 {
            margin-left: 50px;
            margin-top: 10px;
            background-color: #b3d8ff;
            margin-bottom: 5px;
        }

        /*排班*/
        #a {
            width: 1200px;
            position: relative;
            left: 140px;
        }

        .el-input {
            width: 500px;
        }
        .el-table{
            position: absolute;
            left: 145px;
        }
        #aa{
            position: relative;
            left: 300px;
            top: 100px;
        }
    </style>

</head>

<body>
<div id="app">
    <div class="top">
        <div class="inset">
            <img src="https://i1.hdfimg.com/ssi/image/hdf_logo.png" alt="">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">找专家</a>
                </li>
                <li>
                    <a href="#">找医院</a>
                </li>
                <li>
                    <a href="#">查知识</a>
                </li>
                <li>
                    <a href="#">问诊</a>
                </li>
                <li>
                    <a href="/html/userregistration.html">查看预约</a>
                </li>
            </ul>
            <div class="sousuo">
                <input class="inp" type="text" placeholder="疾病、症状、医生、医院等">
                <button class="btn">搜索</button>
            </div>
            <div class="denglu">
    <!--            <div class="login">
                    <a href="#">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">注册</a>
                </div>-->
                <div class="kefu">
                    <img src="https://i1.hdfimg.com/ssi/image/contact.png" alt="">
                    <div class="ktext">联系客服</div>
                </div>
            </div>
        </div>
    </div>
    <div class="wei">
        <div>
            <a href="#">当前位置：</a> >
            <a href="#">好大夫在线</a> >
            <a href="#">预约挂号</a>
        </div>
    </div>
    <div class="banner">
        <div class="b-t">
            <div class="b-one">好大夫在线</div>
            <div class="b-two">“预约挂号服务”</div>
        </div>
        <div class="b-b">全国3621家医院 28002位医生可挂号 已累计帮助 5631052 位患者成功就诊</div>
    </div>
    <div class="center">
        <div class="inp">
            <input type="text" placeholder="请输入医院、医生、科室、疾病">
            <button>搜索</button>
        </div>
        <div class="dress">
            <div class="d-d">
                <strong>地区：</strong>
                <a @click="dc">全国&nbsp;</a>
                <a v-for="province in provinces"
                   @click="querycity(`${province.name}`,`${province.baseAreaid}`)">{{province.name}}&nbsp;&nbsp;&nbsp;&nbsp;</a></br>
                <div class="city1">
                    <a v-for="city in citys" @click="queryhospital(`${city.baseAreaid}`)">{{city.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
                <strong>医院：</strong>
                <a v-for="ho in hospitalsa">{{ho.hospName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <a v-for="hospital in hospitals" @click="queryCityhospitalKS(`${hospital.hospId}`)">{{hospital.hospName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><br>
                <strong>科室：</strong>
                <a v-for="departmentx in departmentsa">{{departmentx.departmentName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <span v-for="department in departments">
                <a v-for="dep in department.departmentList"
                   @click="queryIll(`${dep.departmentId}`)">{{dep.departmentName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            </span><br>
                <strong>疾病：</strong>
                <a v-for="ailments in ailmentsa">{{ailments.diseaseName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <a v-for="ailment in ailments" @click="loadData">{{ailment.diseaseName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            </div>
        </div>
    </div>

    <!--排班-->
    <div>
        <el-table
                :data="tableData"
                style="width: 81%">
            <el-table-column
                    prop="name"
                    label="名字">
            </el-table-column>
<!--            <el-table-column
                    prop="number"
                    label="可预约人数">
            </el-table-column>-->
            <el-table-column
                    prop="money"
                    label="挂号费用">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="医生介绍">
            </el-table-column>
            <el-table-column label="操作" width="160px" fixed="right">
                <!--slot槽   scope所有表数据   scope.$index 行下标 scope.row 表中的一行数据-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary" round
                            @click="handleEdit(scope.row)">预约挂号</el-button>
                </template>
            </el-table-column>

        </el-table>
<!--        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,5,10,15,20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>-->
                <div id="aa">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        small
                    </el-pagination>
                </div>




    </div>
    <div>
        <el-dialog title="预约挂号" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="医生名字" :label-width="formLabelWidth">
                    <el-input v-model="form.name"   :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="当天剩余次数" :label-width="formLabelWidth">
                    <el-input v-model="form.number"   :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号费用" :label-width="formLabelWidth">
                    <el-input v-model="form.money"   :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="名字" :label-width="formLabelWidth">
                    <el-input v-model="form.sname"   autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.card"   autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号时间" :label-width="formLabelWidth">
                    <el-select v-model="form.date" placeholder="请选择时间" @change="handleChange">
                        <el-option v-for="data in dataList"
                                   :key="data.time"
                                   :label="data.time"
                                   :value="data.time"
                        ></el-option>

                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save" :disabled="form.number === 0">确 定</el-button>
               <!-- :disabled="form.number === 0" >预约挂号</el-button>-->
            </div>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">

            <div>支付的金额:￥{{registration.money}}元</div>
            <div>订单的状态:{{paystatus}}</div>
            <!--存放二维码的区域-->
            <qriously v-if="codeUrl!=''" :value="codeUrl" :size="338"/>
        </el-dialog>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                currentPage: 1,//当前页 第几页
                provinces: [],
                dialogVisible:false,
                citys: [],
                hospitals: [],
                hospitalsa: [],
                departments: [],
                departmentsa: [],
                ailments: [],//疾病
                ailmentsa: [],
                dialogFormVisible: false,
                formLabelWidth: '100px',
                form: {
                    time:'',
                    number:'',
                    status:'',
                },
                tableData: [],
                currentPage: 1,
                pageSize: 5,
                total: 0,
                dataList:[],
                paystatus:'',
                codeUrl:'',
                timer1:'',
                registration:{
                    money:0.01,
                    id:'',
                    describe: '',
                },
                id:''

            }
        },
        methods: {
/*

            //处理每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                //让每页数量发生改变
                this.pageSize=val;
                //调用加载数据方法
                this.loadData();
            },
            //处理当前页（页码 第几页）发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                //让第几页发生改变
                this.currentPage=val;
                //调用加载数据方法
                this.loadData();
            },
*/

            // 获取支付是否成功状态
           /* queryPayStatus(ordernum) {
                var _this = this;
                axios.get("/order/getPayStatus/" + ordernum)
                    .then(function (response) {
                        // 注意 trade_state_desc 不能随便写，这是微信平台返回给我们的
                        _this.paystatus = response.data.data.trade_state_desc;
                        if (_this.paystatus == "支付成功") {
                            _this.$message({
                                message: '预约成功',
                                type: 'success'
                            });
                            // 支付成功修改订单状态为成功
                            axios.post("/regi/updateId"+this.form)
                                .then(response => {
                                    console.log(response);
                                    if (response.data.code === 200) {
                                        alert(JSON.stringify(response))
                                    }
                                });
                            _this.dialogVisible = false;
                            // 清除定时任务  不让每3秒再执行
                            clearInterval(_this.timer1);
                            location.href="/html/registration-page.html"
                        }
                    })
            },*/
            //获取支付是否成功状态
            queryPayStatus(ordernum) {
                var _this = this;
                //axios.get("/order/getPayStatus?orderNum=" + ordernum)
                //  url = /order/getPayStatus/order123
                axios.get("/order/getPayStatus/" + ordernum)
                    .then(function (response) {
                        //注意  trade_state_desc不能随便写，这是微信平台返回给我们的
                        _this.paystatus = response.data.data.trade_state_desc;
                        if (_this.paystatus == "支付成功") {
                            _this.$message({
                                message: '预约成功',
                                type: 'success'
                            });
                            alert(_this.id)
                            //支付成功修改订单状态为成功
                            axios.put("/regi/updateId?id="+_this.id)
                                .then(response => {
                                console.log(response);

                                if (response.data.code === 200) {
                                    alert(JSON.stringify(response))
                                }

                            });
                            _this.dialogVisible = false;
                            //清除定时任务  不让每3秒再执行
                            clearInterval(_this.timer1);
                            location.href="/html/registration-page.html"
                        }
                    })
            },
            //处理关闭支付弹框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleChange(){
                axios.get('/subscribe/sub?'+'careerId='+this.form.careerId+'&date='+this.form.date).then(res => {
                    console.log(res)
                    this.form.number=res.data.data.num
                    console.log(res)
                  //  alert(res.data.data.num)
                   /* if (res.data.data.number=0){
                        this.$message.error("当前日期已约满");
                    }*/
                    /*this.handleChange()*/
                })
            },

            //查询医生
            loadData(){
                axios.get('/subscribe', {
                    params: {
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    console.log(res)
                    this.total = res.data.data.total
                    this.tableData = res.data.data.list;
                })



                //定义一个变量，赋值为当前vue对象
                // var _this = this;
                // axios.post(//请求方式，必须和后端资源暴露方式一致
                //     '/syscareer/queryByPage',//请求的url
                //     {"pageNo":this.currentPage,"pageSize":this.pageSize})//请求携带的参数
                //     .then(function (response) {//成功响应的处理方法   response 是响应的数据
                //         console.log(response);
                //             //直接使用this 代表axios的对象  this
                //             _this.tableData=response.data.data.list;
                //             _this.total=response.data.data.total;
                //
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNo) {  // 改变当前页码触发
                this.currentPage = pageNo
                this.load()
            },
            handleEdit(row,index){
                console.log(row)
                this.form=row
                axios.get('/subscribe/'+ row.careerId).then(res => {
                    console.log(res)
                    this.dataList = res.data.data;
                    // console.log(this.name)
                    // this.form = res.data.data
                })
                this.dialogFormVisible = true;
            },
            tosave(item) {
                console.log(item)
                this.form = item

                this.dialogFormVisible = true
                //this.form = {}
                // console.log(item);
                // this.dialogFormVisible = true;

            },
            //添加
            save() {
                axios.post('/regi', this.form).then(res => {
                    console.log(res)
                    // this.load()
                    console.log(this.form)
                    this.form = {}
                    alert(JSON.stringify(res))
                    if (res.data.code==200){
                        this.dialogFormVisible = false
                        this.dialogVisible=true
                        this.registration.careerId= res.data.data.id+res.data.data.card+'00000';
                        this.id=res.data.data.id
                        alert(this.id)
                        //
                        this.registration.describe=res.data.data.sname+'支付预约费用';
                        alert(JSON.stringify(this.registration))
                        axios.post('/regi/getNativeCodeUrl', this.registration).then(res => {
                            alert(JSON.stringify(res))
                            this.codeUrl=res.data.data.code_url;

                        })

                       /* location.href="order-pay.html";*/

                    }
                })
            },
            //初始化
            provinceButton() {
                let _this = this;
                axios.get(
                    //查询所有省份
                    "/area/queryAllTreeData"
                )
                    .then(function (response) {
                        console.log(response);
                        if (response.data.code) {
                            _this.provinces = response.data.data;
                            // _this.prov =response.data.data.baseAreaid;

                        }
                        console.log(_this.prov);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

            },
            querycity(province, id) {
                this.hospitalsa = [];
                console.log(province);
                let _this = this;
                axios.get(
                    //市区
                    "/area/queryTreeDataByName?name=" + province
                )
                    .then(function (response) {
                        _this.citys = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                axios.get(
                    //省医
                    "/hospital/queryAll?hospProvince=" + id
                )
                    .then(function (response) {
                        console.log(response);
                        if (response.data.code) {
                            _this.hospitals = response.data.data;
                            // _this.prov =response.data.data.baseAreaid;

                        }
                    })
            },
            queryhospital(id) {
                let _this = this;
                axios.get(
                    //市医
                    "/hospital/queryByCity?hospCity=" + id
                )
                    .then(function (response) {
                        _this.hospitals = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

            },
            //医院初始
            csyy() {
                let _this = this;
                axios.post(
                    //省医
                    '/hospital/queryByPage',
                    {
                        "pageNo": this.currentPage, "pageSize": this.pageSize,
                    }
                )
                    .then(function (response) {
                        console.log(response);
                        if (response.data.code) {
                            _this.hospitalsa = response.data.data.list;
                        }
                    })
            },
            //初始科室
            yyks() {
                let _this = this;
                axios.post(
                    //省医
                    '/department/queryByPage',
                    {
                        "pageNo": this.currentPage, "pageSize": this.pageSize,
                    }
                )
                    .then(function (response) {
                        console.log(response);
                        if (response.data.code) {
                            _this.departmentsa = response.data.data.list;
                        }
                    })
            },
            csIll() {
                let _this = this;
                axios.post(
                    //省医
                    '/disease/queryByPage',
                    {
                        "pageNo": this.currentPage, "pageSize": this.pageSize,
                    }
                )
                    .then(function (response) {
                        console.log(response);
                        if (response.data.code) {
                            _this.ailmentsa = response.data.data.list;
                        }
                    })
            },
            //科室下的疾病
            queryIll(Ill) {
                this.ailmentsa = [];
                let _this = this;
                axios.get(
                    "/disease/queryDisease?departmentId=" + Ill
                )
                    .then(function (response) {
                        console.log(response);
                        _this.ailments = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //全国
            dc() {
                this.citys = [];
                this.csyy();
                this.yyks();
                this.csIll();

            },
            //科室
            queryCityhospitalKS(hid) {
                this.departmentsa = [];
                let _this = this;
                axios.get(
                    "/hospital/queryByHospital?hospId=" + hid
                )
                    .then(function (response) {
                        console.log(response);
                        _this.departments = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        },
        created() {
            console.log("你能带我一起旅行")

            // this.load()



            this.provinceButton();
            this.csyy();
            this.yyks();
            this.csIll();

            this.timer1=setInterval(()=>{
                this.queryPayStatus(this.registration.careerId);
            },3000)
        }
    });
</script>
</body>

</html>